<template>
  <div>
    <div class="top">
      <div class="avatar">
        <img v-lazy="avatar" alt="" />
      </div>
      <div class="txt" @click="loginFn">{{loginText}}</div>
      <div class="icon">
        <van-icon name="arrow" v-show="!showIcon" color="#fff"  />
        <van-icon name="cross" v-show="showIcon" color="#fff" @click="backFn" />
      </div>
    </div>
    <!-- 宫格区域 -->
    <GridCom></GridCom>
    <!-- 模态框 -->
    <Modes :isShowMode="isShowMode" @closed="closed" @onSubmit="onSubmit" />

    <!-- 退出登陆框 -->
    <van-dialog
      v-model="show"
      title="退出账号确认"
      className="content"
      show-cancel-button
      @confirm ="confirmFn"
      
    >
      <div class="text">您是否想要退出当前账号？</div>
    </van-dialog>

  </div>
</template>

<script>
import GridCom from "../components/user/Grid.vue";
import Modes from "../components/user/Modes.vue";
// import Dialog from '../components/user/Dialog.vue'
import { loginByWeb } from "../request/api";
export default {
  data() {
    return {
      //图标的显示
      showIcon:false,
      // 初始化头像
      avatar:'',
      loginText:'点击登陆',
      //用户名和密码
      username: "",
      password: "",
      //控制模态框的状态
      isShowMode: false,
      //保存用户信息
      userInfo:{},
      token : localStorage.getItem("token"),
      //弹出退出确认框 Dialog
      show:false
    };
  },
  components: {
    GridCom,
    Modes
  },

  methods: {
    //点击登陆
    loginFn() {
      //显示模态框 //已经登陆就不能再按了
     let token = localStorage.getItem('token')
     if(!token){
         this.isShowMode = true
     }
    },
    //子传父 点击阴影图层隐藏模态框
    closed(val) {
      this.isShowMode = val;
    },
    //父传子  得到模态框传来的用户名和密码
    onSubmit(val1,val2){
        this.username=val1,
        this.password=val2
        //显示icon图标(有token)
        this.showIcon = true
    //判断有没有token
      let mytoken = localStorage.getItem("token");
      //没有token说明没有登陆,我们就让他登陆
      if (!mytoken) {
          //发起登录请求
        if(this.username === ''&& this.password=== ''){
            return
        }
        loginByWeb({
          username: this.username,
          pwd: this.password
        }).then((res) => {
          //存token
          localStorage.setItem("token", res.data.token)
          //存用户(信息)的昵称和头像  存需要序列化
          localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo)) 
        // 登陆成功之后隐藏模态框
           this.isShowMode = false
         this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
        //登陆成功渲染数据
          this.avatar = this.userInfo.avatar,
          this.loginText = this.userInfo.username
          //icon图标的显示和隐藏
        }).catch( err => {
            //登陆错误的提示///////////////////
            console.log(err.errmsg);
             
        })
      }
    },

   //退出登陆 取消按钮事件
  //  cancelFn(){
  //    console.log(2);
  //  },
   //点击确认退出事件
   confirmFn(){
      //  清除token之后 恢复默认值
      localStorage.clear("token")
      this.avatar = '',
      this.loginText = '点击登陆',
      this.showIcon = false
   },
    // 退出登陆
    backFn() {
      //弹出Dialog框
      this.show = true
    },
  },
  //进入页面的加载,有token就把数据渲染了
  created(){
      //如果用户已经登陆了,直接渲染本地的信息
      //取数据需要反序列化
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
      if(this.token){
          this.avatar = this.userInfo.avatar,
          this.loginText = this.userInfo.username
           //应对用户刷新的时候切换不了icon的问题
          this.showIcon = true
          
      }
     
       
  }
};
</script>
 
<style lang = "less" scoped>
@import "/commonCss.less";
.top {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
  .avatar {
    width: 70px;
    height: 70px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .txt {
    flex: 1;
    color: #fff;
    margin: 0 10px;
  }
}

 .content {
  text-align: center;

  .text {
    word-wrap: break-word;
    padding: 26px 24px;
    line-height: 20px;
    padding-top: 15px;
    color: #646566;
  }
}
</style>